<template>
  <i-form
      ref="formRef"
      :model="formData"
      :rules="state.formRules"
      :label-width="80"
      label-position="right"
      :inline="true"
      class="menu-form">


    <FormItem label="菜单类型" prop="type">
      <RadioGroup v-model="formData.type">
        <Radio label="M" border>目录</Radio>
        <Radio label="C" border>菜单</Radio>
        <Radio label="A" border>按钮</Radio>
      </RadioGroup>
    </FormItem>


    <FormItem label="父级菜单" prop="pid">
      <TreeSelect v-model="formData.pid" :data="menusData"/>
    </FormItem>


    <FormItem label="菜单名称" prop="name">
      <Input v-model="formData.name" placeholder="请输入菜单名称"/>
    </FormItem>


    <FormItem label="菜单图标" prop="icon" v-show="['C','M'].indexOf(formData.type)!==-1">
      <icon-picker ref="iconPickerRef" @getSelectedIcon="getSelectedIcon"></icon-picker>
    </FormItem>


    <FormItem label="路由路径" v-show="['C','M'].indexOf(formData.type)!==-1">
      <Input v-model="formData.path" placeholder="请输入路由路径"/>
      <span class="form-tip">例如`/user`</span>
    </FormItem>


    <FormItem label="组件路径" v-show="formData.type==='C'">
      <AutoComplete
          v-model="formData.component"
          :data="componentsData"
          placeholder="请输入组件路径"
      >
        <Option v-for="item in componentsData" :value="item" :key="item">{{ item }}</Option>
      </AutoComplete>
      <span class="form-tip">默认组件在`src/page`下面</span>
    </FormItem>


    <FormItem label="权限字符" v-show="['C','A'].indexOf(formData.type)!==-1">
      <Input v-model="formData.perms" placeholder="请输入权限字符"/>
      <span class="form-tip">例如`config/get_index_data`,其实就是后台接口url地址</span>
    </FormItem>


    <FormItem label="是否显示" prop="is_show" required v-show="['C','M'].indexOf(formData.type)!==-1">
      <RadioGroup v-model="formData.is_show">
        <Radio :label="1" border>显示</Radio>
        <Radio :label="0" border>隐藏</Radio>
      </RadioGroup>
      <br/>
      <span class="form-tip">选择隐藏则路由不会出现在侧边栏,但仍可以访问</span>
    </FormItem>


    <FormItem label="菜单状态" prop="is_disable" required v-show="['C','M'].indexOf(formData.type)!==-1">
      <RadioGroup v-model="formData.is_disable">
        <Radio :label="0" border>正常</Radio>
        <Radio :label="1" border>停用</Radio>
      </RadioGroup>
      <br/>
      <span class="form-tip">选择停用则路由不会出现在侧边栏,也不能被访问</span>
    </FormItem>
    <FormItem label="菜单排序">
      <InputNumber v-model="formData.sort" controls-outside></InputNumber>
      <br/>
      <span class="form-tip">数值越大越靠前</span>
    </FormItem>
  </i-form>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {MenuService} from "@/api/menu";
import IconPicker from "@/components/icon-picker";
import {getAllModules} from '@/api/utils';
import {Option} from 'view-ui-plus';

const props = defineProps({
  menusData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const mode = ref('');

const {proxy} = getCurrentInstance();

const formData = reactive({
  id: '',
  // 类型
  type: 'M',
  // 父级id
  pid: 0,
  // 菜单名称
  name: '',
  // 菜单图标
  icon: '',
  // 路由路径
  path: '',
  // 是否显示
  is_show: 1,
  // 菜单状态
  is_disable: 0,
  // 菜单排序
  sort: 400,
  // 组件路径
  component: '',
  // 权限字符
  perms: ''
})

const state = reactive({
  formRules: {
    type: [{required: true, message: '菜单类型不能为空!'}],
    pid: [{required: true, message: '父级菜单不能为空!'}],
    name: [{required: true, message: '菜单名称不能为空!'}],
    path: [{required: true, message: '路由路径不能为空!'}]
  }
})

const componentsData = reactive(getAllModules());

const addMenuData = () => {
  console.log(mode)
  proxy.$refs.formRef.validate(valid => {
    console.log(valid)
    if (!valid) {
      Promise.reject()
      return false;
    } else {
      console.log(mode.value)
      if (mode.value === 'add') {
        post();
      } else {
        console.log('编辑')
        edit();
      }
    }
  })
}

const post = async () => {
  const {data} = await MenuService.AddMenu(formData);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        // CommonServices.getMenus();
        window.location.reload()
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}

const edit = async () => {
  const {data} = await MenuService.ModifyMenuById(formData);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        // CommonServices.getMenus();
        window.location.reload()
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}

const getDetail = async (e) => {
  console.log(mode)
  let param = {
    id: e.value
  };
  const {data} = await MenuService.GetMenuById(param);
  if (data.code === 200) {
    // data.data.pid += ''
    // data.data.pid = '6'
    console.log(data)
    setFormData(data.data)
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}

const getSelectedIcon = (e) => {
  console.log(e)
  formData.icon = e;
}

const setFormData = (data) => {
  Object.assign(formData, data);
  proxy.$refs.iconPickerRef.setIcons(data.icon)
}

onMounted(() => {
  console.log(mode)
})

defineExpose({
  addMenuData,
  mode,
  getDetail
})

</script>

<style scoped lang="less">
@import "menu-edit.less";
</style>
